<template>
	<!-- <view class="uni-container" :style="{'background-image': 'url('+imageURL+')', 'background-repeat': 'no-repeat', 'background-size': '100%'}"> -->
	<view class="uni-container" :style="{'background-color': '#ffffff', 'background-repeat': 'no-repeat', 'background-size': '100% 30%'}">

		<view class="resultdetail">
			<table>
				<tr>
					<th>月份</th>
					<th>税前月薪</th>
					<th>五险一金</th>
					<th>个税</th>
					<th>到手月薪</th>
				</tr>
				<tr v-for="(item, index) in wages.wagesResult.monthList">
					<td>{{item.month}}</td>
					<td>{{item.monthSalary}}</td>
					<td>{{item.secutityDeductions}}</td>
					<td>{{item.tax}}</td>
					<td>{{item.afterTaxMonthSalary}}</td>
				</tr>
				<tr class="total">
					<td>总计</td>
					<td>{{wages.wagesResult.beforeTaxYearSalary}}</td>
					<td>{{wages.wagesResult.yearSecutityDeductions}}</td>
					<td>{{wages.wagesResult.totalTax}}</td>
					<td>{{wages.wagesResult.afterTaxYearSalary}}</td>
				</tr>
			</table>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
			}
		},
		computed: {
			...mapState(['wages'])
		},
		methods: {
			
		}
	}
</script>

<style>
	

.resultdetail {
    overflow: hidden
}

.resultdetail table {
    width: 100%;
    text-align: center;
    font-size: .773333rem;
    margin-top: 1.153333rem;
	border-collapse: collapse;
}

.resultdetail table th {
    font-weight: 700
}

.resultdetail table tr {
    height: 1.153333rem;
    line-height: 1.153333rem;
    border-bottom: .026667rem solid #fff
}

.resultdetail table tr td:nth-child(odd) {
    background-color: rgba(211,222,223,.2)
}

.resultdetail table tr.total {
    height: 1.786667rem;
    line-height: 1.786667rem
}

.resultdetail table tr.total td {
    border: none;
    background-color: rgba(0,0,0,0)
}

</style>
